<template>
  <div class="mine">
    <div class="header">
      <div class="top-icon">
        <img src="../../assets/img/mine-01.png" alt="" @click="goConsult" />
        <img src="../../assets/img/mine-02.png" alt="" />
        <img src="../../assets/img/mine-03.png" alt="" />
      </div>
      <div class="top">
        <img src="../../assets/img/mine-04.png" alt="" class="left" />
        <div class="center">
          <div v-if="loginState">
            <p>{{ userinfo.phone }}</p>
            <div class="l_state">
              <p class="level">
                <img src="../../assets/img/user_icon.png" alt="" />
                <span>{{ userinfo.level }}</span>
              </p>
              <p class="tuichu" @click="signout">退出登录</p>
            </div>
          </div>
          <p v-else @click="goLogin">登录/注册</p>
        </div>
        <div class="right" @click="toSignin">
          <img src="../../assets/img/mine-06.png" alt="" />
          <span>签到</span>
        </div>
      </div>
    </div>

    <div class="main">
      <img src="../../assets/img/mine-07.png" alt="" class="left" />
      <div class="center">
        <p class="p1">我的积分: {{ userinfo.point }}</p>
        <p class="p2">每日签到+50积分</p>
      </div>
      <div class="right" @click="goMall">
        <span>兑换换好礼</span>
      </div>
    </div>

    <div class="tool">
      <p>常用工具</p>
      <van-grid>
        <van-grid-item
          :icon="require('../../assets/img/mine-15.png')"
          text="优惠券"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-16.png')"
          text="积分活动"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-08.png')"
          text="历史租约"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-09.png')"
          text="我的发布"
        />
      </van-grid>
    </div>

    <img src="../../assets/img/mine-10.png" alt="" class="banner" />

    <div class="deposit">
      <p class="p1">我的押金</p>
      <div>
        <span>￥{{ userinfo.deposit }}.00</span>
        <p>申请退款</p>
      </div>
      <p class="p2">累计处理押金17亿5779万3207元</p>
    </div>

    <div class="else">
      <p>其他</p>
      <van-grid>
        <van-grid-item
          :icon="require('../../assets/img/mine-01.png')"
          @click="goConsult"
          text="客服中心"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-11.png')"
          text="免打扰"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-12.png')"
          text="实名认证"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-13.png')"
          text="支付管理"
        />
        <van-grid-item
          :icon="require('../../assets/img/mine-14.png')"
          text="我的问答"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapMutations } from "vuex";

import { getUserInfo } from "../../utils/app";

export default {
  data() {
    return {
      userinfo: {
        phone: "",
        point: 0, // 积分
        deposit: 0, // 押金
        level: "普通用户",
      },
      loginState: false,
    };
  },

  methods: {
    ...mapMutations(["changeLoginState"]),
    goLogin() {
      //点击跳转至上次浏览页面
      // this.$router.go(-1);
      //指定跳转地址
      this.$router.push("/login");
    },
    toSignin() {
      if (localStorage.getItem("token")) {
        this.$router.push("/signin");
      } else {
        Toast.fail("需要登录后方能进行签到");
      }
    },

    goMall() {
      if (localStorage.getItem("token")) {
        this.$router.push("/mall");
      } else {
        Toast.fail("登录后即可前往兑换好礼");
      }
    },

    signout() {
      this.point = 0;
      this.deposit = 0;
      this.level = "普通用户";
      localStorage.removeItem("token");
      localStorage.removeItem("gather");
      this.loginState = false;
      this.changeLoginState();
    },

    getDataInfo() {
      setTimeout(async () => {
        if (localStorage.getItem("token")) {
          console.log(121212121212);
          this.loginState = true;
          const res = await getUserInfo({
            token: localStorage.getItem("token"),
          });
          console.log(res);
          this.userinfo.phone =
            res.list.phone.substring(0, 3) +
            "****" +
            res.list.phone.substring(7);
          this.userinfo.point = res.list.point;
          this.userinfo.deposit = res.list.deposit;
          this.userinfo.level = res.list.level;
        }
      }, 100);
    },
  },

  created() {
    this.getDataInfo();
  },
};
</script>

<style lang="less">
// .mine {
//   .header {
//     height: 141px;
//     background: #f8f8f8;

//     .top-icon {
//       display: flex;
//       justify-content: flex-end;

//       img {
//         width: 20px;
//         height: 19px;
//         margin-right: 26px;
//         margin-top: 13px;
//       }
//     }
//     .top {
//       display: flex;
//       align-items: center;
//       margin-top: 15px;
//       .left {
//         width: 61px;
//         height: 61px;
//         margin-left: 20px;
//       }
//       .center {
//         width: 110px;
//         margin-left: 7px;
//         font-size: 20px;
//       }
//       .right {
//         // width: 65px;
//         padding: 0 10px 0 10px;
//         height: 32px;
//         line-height: 25px;
//         border: 1px solid red;
//         margin-left: 90px;
//         text-align: center;
//         img {
//           width: 16px;
//           height: 16px;
//           vertical-align: middle;
//         }
//         span {
//           display: inline-block;
//           width: 24px;
//           // height: 11px;
//           font-size: 12px;
//           margin-left: 5px;
//           vertical-align: middle;
//           color: #f3786b;
//         }
//       }
//     }
//   }
//   .main {
//     margin: auto;
//     display: flex;
//     background-color: #fff;
//     padding-bottom: 12px;
//     .left {
//       width: 61px;
//       height: 61px;
//       margin-left: 20px;
//       margin-top: 14px;
//     }
//     .center {
//       margin-left: 7px;
//       font-size: 20px;
//       margin-top: 27px;
//       .p1 {
//         width: 81px;
//         height: 15px;
//         font-size: 15px;
//         font-family: PingFang SC;
//         font-weight: bold;
//         color: #333333;
//       }
//       .p2 {
//         width: 97px;
//         height: 12px;
//         font-size: 12px;
//         font-family: PingFang SC;
//         font-weight: 500;
//         color: #b7b7b7;
//         margin-top: 8px;
//       }
//     }
//     .right {
//       width: 93px;
//       height: 35px;
//       line-height: 26px;
//       border: 2px solid #e55765;
//       border-radius: 5px;
//       margin-left: 70px;
//       margin-top: 24px;
//       text-align: center;
//       span {
//         width: 69px;
//         height: 13px;
//         font-size: 14px;
//         font-family: PingFang SC;
//         font-weight: 500;
//         color: #f95d6f;
//       }
//     }
//   }
//   .tool {
//     margin-top: 10px;
//     background: #fff;
//     padding: 20px 15px 22px 15px;

//     p {
//       // width: 65px;
//       font-size: 16px;
//       font-family: PingFang SC;
//       font-weight: bold;
//       color: #333333;
//     }
//   }
//   .banner {
//     width: 347px;
//     margin: 8px 14px 0 14px;
//   }
//   .deposit {
//     width: 345px;
//     height: 133px;
//     margin: 8px 15px 0 15px;
//     background-color: #fff;

//     .p1 {
//       font-size: 16px;
//       font-family: PingFang SC;
//       font-weight: bold;
//       color: #333333;
//       padding: 10px 0 0 15px;
//     }
//     div {
//       display: flex;
//       justify-content: space-between;
//       margin-top: 38px;
//       span {
//         margin-left: 16px;
//       }

//       p {
//         width: 80px;
//         height: 30px;
//         line-height: 30px;
//         background: #fefefe;
//         border: 1px solid #c7c7c7;
//         border-radius: 4px;
//         font-size: 13px;
//         font-family: PingFang SC;
//         font-weight: 500;
//         color: #c3c3c3;
//         text-align: center;
//         margin-right: 20px;
//       }
//     }
//     .p2 {
//       font-size: 14px;
//       font-family: PingFang SC;
//       font-weight: 500;
//       color: #a7a9a7;
//       padding: 5px 0 0 16px;
//     }
//   }
//   .else {
//     margin: 10px 15px 76px 15px;
//     background-color: #fff;

//     p {
//       font-size: 16px;
//       font-family: PingFang SC;
//       font-weight: bold;
//       color: #333333;
//       padding: 20px 0 0 15px;
//     }
//     .van-grid-item__text {
//       color: #949494;
//     }
//     .van-icon__image {
//       font-size: 20px;
//     }
//   }
// }

.mine {
  .header {
    height: 130px;
    background: #f8f8f8;

    .top-icon {
      display: flex;
      justify-content: flex-end;

      img {
        width: 20px;
        height: 19px;
        margin-right: 26px;
        margin-top: 13px;
      }
    }
    .top {
      display: flex;
      align-items: center;
      margin-top: 15px;
      .left {
        width: 61px;
        height: 61px;
        margin-left: 20px;
      }
      .center {
        width: 110px;
        margin-left: 7px;
        font-size: 20px;
      }
      .right {
        // width: 65px;
        padding: 0 10px 0 10px;
        height: 32px;
        line-height: 25px;
        border: 1px solid red;
        text-align: center;
        margin-left: 90px;
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          width: 24px;
          // height: 11px;
          font-size: 12px;
          margin-left: 5px;
          vertical-align: middle;
          color: #f3786b;
        }
      }
    }
  }
  .l_state {
    display: flex;
    justify-content: space-between;
    width: 180px;
    .tuichu {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 166/2px;
      height: 44/2px;
      font-size: 11px;
      margin-top: 6px;
      vertical-align: middle;
      background-color: #e4e6e5;
      border-radius: 22/2px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #7f7f7f;
    }
    .level {
      display: flex;
      align-items: center;
      width: 166/2px;
      height: 44/2px;
      background-color: #e4e6e5;
      border-radius: 22/2px;
      margin-top: 5px;
      img {
        width: 28/2px;
        height: 28/2px;
        margin-left: 5px;
        vertical-align: middle;
      }
      span {
        width: 100/2px;
        height: 23/2px;
        font-size: 24/2px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #7f7f7f;
        margin-left: 5px;
        vertical-align: middle;
      }
    }
  }

  .main {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding-bottom: 12px;
    .left {
      width: 61px;
      height: 61px;
      margin-left: 20px;
      margin-top: 15px;
    }
    .center {
      width: 120px;
      margin-left: 10px;
      font-size: 20px;
      margin-top: 16px;
      .p1 {
        width: 120px;
        height: 15px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .p2 {
        width: 97px;
        height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b7b7b7;
        margin-top: 12px;
      }
    }
    .right {
      width: 93px;
      height: 35px;
      line-height: 26px;
      border: 2px solid #e55765;
      border-radius: 5px;
      margin-left: 55px;
      margin-top: 16px;
      text-align: center;
      span {
        width: 69px;
        height: 13px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f95d6f;
      }
    }
  }
  .tool {
    margin-top: 10px;
    background: #fff;
    padding: 20px 15px 22px 15px;

    p {
      // width: 65px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
  }
  .banner {
    width: 347px;
    margin: 8px 14px 0 14px;
  }
  .deposit {
    width: 345px;
    height: 133px;
    margin: 8px 15px 0 15px;
    background-color: #fff;

    .p1 {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      padding: 10px 0 0 15px;
    }
    div {
      display: flex;
      justify-content: space-between;
      margin-top: 38px;
      span {
        margin-left: 16px;
      }

      p {
        width: 80px;
        height: 30px;
        line-height: 30px;
        background: #fefefe;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #c3c3c3;
        text-align: center;
        margin-right: 20px;
      }
    }
    .p2 {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #a7a9a7;
      padding: 5px 0 0 16px;
    }
  }
  .else {
    margin: 15px 15px 20px 15px;
    background-color: #fff;

    p {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      padding: 20px 0 0 15px;
    }
    .van-grid-item__text {
      color: #949494;
    }
    .van-icon__image {
      font-size: 20px;
    }
  }
}
</style>
